<template>
  <el-menu :collapse="collapse" :collapse-transition="false" :default-active="activeMenu" backgroundColor="#001529" textColor="#bfcbd9" activeTextColor="#fff" class="hfull">
    <template v-for="(menu, i) in getMenus()" :key="i">
      <el-sub-menu v-if="menu.children" :index="menu.path">
        <template #title>
          <icon v-if="menu.icon" :icon="menu.icon" />
          <span>{{ menu.label }}</span>
        </template>
        <el-menu-item v-for="(child, j) in menu.children" :key="j" :index="child.path" @click="onClick(child)">
          <icon v-if="child.icon" :icon="child.icon" />
          <template #title>{{ child.label }}</template>
        </el-menu-item>
      </el-sub-menu>
      <el-menu-item v-else :index="menu.path" @click="onClick(menu)">
        <icon v-if="menu.icon" :icon="menu.icon" />
        <template #title>{{ menu.label }}</template>
      </el-menu-item>
    </template>
  </el-menu>
</template>
<script setup lang="ts">
  import { computed, unref } from 'vue'
  import { ElMenu, ElMenuItem, ElSubMenu } from 'element-plus'
  import { Icon } from '@/components/Icon'
  import { router } from '@/router'
  import { getMenus } from '@/seed-application'
  import { MenuItem } from '@/seed-application/types'
  import { open } from '@/components/Popup'

  defineProps<{collapse: boolean}>()

  function onClick(item: MenuItem) {
    if(item.mode == 'popup') {
      open({title: item.componentProps?.title || item.label}, item.component, item.componentProps)
    } else {
      router.push(item.path)
    }
  }

  const activeMenu = computed(() => {
    const { meta, path } = unref(router.currentRoute)
    // if set path, the sidebar will highlight the path you set
    if (meta.activeMenu) {
      return meta.activeMenu as string
    }
    return path
  })
</script>
<style lang="less" scoped>
  /* 设置子菜单悬停的高亮和背景色 */
  .el-sub-menu__title,
  .el-menu-item {
    &:hover {
      color: #FFF !important;
      background-color: #001529 !important;
    }
  }
  /* 设置选中时的高亮背景 */
  .el-menu-item.is-active {
    position: relative;
    background-color: var(--el-color-primary) !important;

    &:hover {
      background-color: var(--el-color-primary) !important;
    }
  }
</style>